<template>
  <div class="tabbar">
     <router-link v-for="(item, index) in tabbarArray" :key="index" :to="item.path" active-class="current-router">
         <div class="item-icon">
             <i class="iconfont" :class="item.icon"></i>
         </div>
         <div class="item-name">{{item.name}}</div>
     </router-link>
  </div>
</template>

<script>
export default {
   props:{
       tabbarArray:Array,
   }
}

</script>
<style lang="scss" scoped>
 $tabbar-radius:20px;
  .tabbar{
    height:$tabbar-height;
    background: #fff;
    border-top-left-radius:$tabbar-radius;
    border-top-right-radius:$tabbar-radius;
    box-sizing:border-box;
    width:100%;
    position:fixed;
    bottom:0px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    box-shadow: opx -5px 2px rgba($color:#ccc,$alpha:0.1);
    .item-icon{
      height: 35px;
      i{
        font-size:26px;
      }
    }
    a{
      color:#999;
    }
    .current-router{
      color:$starbucks-color;
    }
  }
</style>